
<template>
  <el-dialog v-dialogDrag :visible.sync="currentDialogVisible" :top="common.getDialogTop()" title="报表设置" class="dialog-container" width="750px" append-to-body @opened="dialogOpened">
    <el-tabs v-model="activeName">
      <el-tab-pane label="页面设置" name="first">
        <el-form ref="form" :model="reportDef" label-width="120px">
          <el-form-item label="页面类型：">
            <el-select v-model="reportDef.paper.paperType" placeholder="请选择" class="w-120" @change="pagerTypeChange">
              <el-option v-for="(item, index) in propertyHelper.paperTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <span class="margin-left-10">页面宽(毫米)：</span>
            <el-input v-model.number="reportDef.paper.width" :disabled="reportDef.paper.paperType!=='CUSTOM'" placeholder="请输入栏页面宽(毫米)" class="w-130"></el-input>
            <span class="margin-left-10">页面高(毫米)：</span>
            <el-input v-model.number="reportDef.paper.height" :disabled="reportDef.paper.paperType!=='CUSTOM'" placeholder="请输入栏页面高(毫米)" class="w-130"></el-input>
          </el-form-item>
          <el-form-item label="左边距(毫米)：">
            <el-input v-model.number="reportDef.paper.leftMargin" placeholder="请输入页眉顶端距离(毫米)" style="width:240px;"></el-input>
            <span class="margin-left-10">右边距(毫米)：</span>
            <el-input v-model.number="reportDef.paper.rightMargin" placeholder="请输入页眉顶端距离(毫米)" style="width:245px;"></el-input>
          </el-form-item>
          <el-form-item label="上边距(毫米)：">
            <el-input v-model.number="reportDef.paper.topMargin" placeholder="请输入页眉顶端距离(毫米)" style="width:240px;"></el-input>
            <span class="margin-left-10">下边距(毫米)：</span>
            <el-input v-model.number="reportDef.paper.bottomMargin" placeholder="请输入页眉顶端距离(毫米)" style="width:245px;"></el-input>
          </el-form-item>
          <el-form-item label="方向：">
            <el-select v-model="reportDef.paper.orientation" placeholder="请选择" class="w-100pc">
              <el-option label="纵向" value="portrait"></el-option>
              <el-option label="横向" value="landscape"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="HTML报表输出时对齐方式：" label-width="200px">
            <el-select v-model="reportDef.paper.htmlReportAlign" placeholder="请选择" class="w-200">
              <el-option label="居左" value="left"></el-option>
              <el-option label="居中" value="center"></el-option>
              <el-option label="居右" value="right"></el-option>
            </el-select>
            <span class="margin-left-10">HTML报表定时刷新(秒)：</span>
            <el-input v-model.number="reportDef.paper.htmlIntervalRefreshValue" placeholder="请输入" style="width:138px;"></el-input>
          </el-form-item>
          <el-form-item label="套打背景图：">
            <el-input v-model.number="reportDef.paper.htmlIntervalRefreshValue" placeholder="请输入背景图片URL,图片分辨率需要为96dpi" class="w-100pc"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="页眉页脚" name="second">
        <div class="color-666 margin-bottom-10">页眉页脚采用表达式方式定义，如："第"+page()+"页,共"+pages()+"页"</div>
        <el-form ref="form" :model="reportDef" label-width="60px">
          <el-form-item label="页眉：">
            <el-button type="text">字体样式设置</el-button>
            <span class="margin-left-10">页眉顶端距离(毫米)：</span>
            <el-input v-model="reportDef.header.margin" placeholder="请输入页眉顶端距离(毫米)" class="w-200"></el-input>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-row :gutter="10">
              <el-col :span="8">
                <div class="margin-left-10">左：</div>
                <el-input v-model="reportDef.header.left" type="textarea" :rows="4" placeholder="请输入"></el-input>
              </el-col>
              <el-col :span="8">
                <div class="margin-left-10">中：</div>
                <el-input v-model="reportDef.header.center" type="textarea" :rows="4" placeholder="请输入"></el-input>
              </el-col>
              <el-col :span="8">
                <div class="margin-left-10">右：</div>
                <el-input v-model="reportDef.header.right" type="textarea" :rows="4" placeholder="请输入"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="页脚：">
            <el-button type="text">字体样式设置</el-button>
            <span class="margin-left-10">页眉顶端距离(毫米)：</span>
            <el-input v-model="reportDef.footer.margin" placeholder="请输入页眉顶端距离(毫米)" class="w-200"></el-input>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-row :gutter="10">
              <el-col :span="8">
                <div class="margin-left-10">左：</div>
                <el-input v-model="reportDef.footer.left" type="textarea" :rows="4" placeholder="请输入"></el-input>
              </el-col>
              <el-col :span="8">
                <div class="margin-left-10">中：</div>
                <el-input v-model="reportDef.footer.center" type="textarea" :rows="4" placeholder="请输入"></el-input>
              </el-col>
              <el-col :span="8">
                <div class="margin-left-10">右：</div>
                <el-input v-model="reportDef.footer.right" type="textarea" :rows="4" placeholder="请输入"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="分页配置" name="third">
        <el-form ref="form" :model="reportDef" label-width="120px">
          <el-form-item label="分页方式：">
            <el-radio v-model="reportDef.paper.pagingMode" label="fitpage">自动</el-radio>
            <el-radio v-model="reportDef.paper.pagingMode" label="fixrows">固定行数</el-radio>
          </el-form-item>
          <el-form-item v-if="reportDef.paper.pagingMode==='fixrows'" label="每页行数：">
            <el-input v-model.number="reportDef.paper.fixRows" placeholder="请输入栏间距(毫米)" class="w-200"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="分栏配置" name="fourth">
        <div class="color-666">分栏效果在分页时显示，同时在打印、导出报表时采用。</div>
        <el-form ref="form" :model="reportDef" label-width="120px">
          <el-form-item label="分栏：">
            <el-radio v-model="reportDef.paper.columnEnabled" :label="false">禁用</el-radio>
            <el-radio v-model="reportDef.paper.columnEnabled" :label="true">启用</el-radio>
          </el-form-item>
          <el-form-item v-if="reportDef.paper.columnEnabled" label="栏数：">
            <el-select v-model="reportDef.paper.columnCount" placeholder="请选择" class="w-120">
              <el-option v-for="(item, index) in propertyHelper.columnCountList" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <span class="margin-left-10">栏间距(毫米)：</span>
            <el-input v-model.number="reportDef.paper.columnMargin" placeholder="请输入栏间距(毫米)" class="w-200"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="currentDialogVisible = false">关闭</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import propertyHelper from "./propertyHelper.js";
import toolHelper from "../tools/toolHelper.js";
import { pointToMM, mmToPoint } from "../util/Utils.js";

export default {
  props: {
    designer: {
      type: Object,
      default: () => {
        return {};
      }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      activeName: "first",
      datasource: null,
      operationType: "all",
      reportDef: {
        header: {},
        footer: {},
        paper: {}
      },
      propertyHelper,
      toolHelper
    };
  },
  computed: {
    // 显示窗口
    currentDialogVisible: {
      get: function () {
        return this.visible;
      },
      set: function (val) {
        this.$emit("update:visible", val);
      }
    }
  },
  mounted () {},
  methods: {
    // 打开时
    dialogOpened () {
      const { context } = this.designer;
      this.reportDef.header = context.reportDef.header || {};
      this.reportDef.paper = context.reportDef.paper || {};
      this.reportDef.footer = context.reportDef.footer || {};

      const width = this.reportDef.paper.width;
      this.reportDef.paper.width = pointToMM(width);
      const height = this.reportDef.paper.height;
      this.reportDef.paper.height = pointToMM(height);
    },
    // 确认
    confirm () {
      const { context } = this.designer;
      context.reportDef.header = this.reportDef.header;
      context.reportDef.paper = this.reportDef.paper;
      context.reportDef.footer = this.reportDef.footer;

      const width = context.reportDef.paper.width;
      context.reportDef.paper.width = mmToPoint(width);
      const height = context.reportDef.paper.height;
      context.reportDef.paper.height = mmToPoint(height);

      this.currentDialogVisible = false;
      context.hot.render();
    },
    // 页面类型改变
    pagerTypeChange () {
      if (this.reportDef.paper.paperType !== "CUSTOM") {
        const item = this.propertyHelper.paperSizeList[this.reportDef.paper.paperType];
        if (item) {
          this.reportDef.paper.width = item.width;
          this.reportDef.paper.height = item.height;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-container {
  padding: 0;
  .border-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
